<template>
  <!-- 选货单详情 -->
  <div>
    <!--信息单 -->
    <div>
      <!-- 第一行 -->

      <div class="hhh">
        <span style="font-weight:bold;position: relative; margin-left:20px;top:15px">选货单详情</span>
        <div class="submitandcancel">
          <el-button type="primary" icon="el-icon-arrow-left" @click="prev">上一页</el-button>
          <el-button type="primary" @click="next">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>

          <a :href="href">
            <el-button plain icon="el-icon-printer ">打印</el-button>
          </a>
          <el-button plain icon="el-icon-s-order" v-if="formdata.soStatus =='编辑'" @click="check('2','1')">完成
          </el-button>


          <el-button plain icon="el-icon-edit">编辑</el-button>


          <el-button type="primary" icon="el-icon-top-left" @click="back">返回</el-button>
        </div>
        <hr>
      </div>

      <div>
        <span class="infoborder">基本信息</span>
      </div>

      <div>
        <el-descriptions style="margin-top:20px">
          <el-descriptions-item label="品类">{{formdata.soType}}</el-descriptions-item>
          <el-descriptions-item label="制单人">{{formdata.createdBy}}</el-descriptions-item>
          <el-descriptions-item label="制单时间">{{formdata.createdTime.substring(0, 19)
            .replace('T', ' ')}}</el-descriptions-item>
          <el-descriptions-item label="单号">{{formdata.name}}</el-descriptions-item>
          <el-descriptions-item label="客户">{{formdata.customer}}</el-descriptions-item>
          <el-descriptions-item label="成色">{{formdata.condition}}</el-descriptions-item>
          <el-descriptions-item label="仓库">{{formdata.repository}}</el-descriptions-item>
          <el-descriptions-item label="状态">{{formdata.soStatus}}</el-descriptions-item>
          <el-descriptions-item label="部门">{{formdata.dept}}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div>
        <span class="infoborder">产品信息</span>
      </div>

      <!-- 产品信息表格 -->
      <el-table :data="selectorderlist" style="width: 100%">
        <el-table-column prop="id" type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="productDto.productInfo" label="产品信息">
        </el-table-column>
        <el-table-column prop="productDto.productName" label="产品名称">
        </el-table-column>
        <el-table-column prop="productDto.productCode" label="条码">
        </el-table-column>
        <el-table-column prop="productDto.customer" label="客户">
        </el-table-column>
        <el-table-column prop="productDto.region" label="区域">
        </el-table-column>
        <el-table-column prop="productDto.condition" label="成色">
        </el-table-column>
        <el-table-column prop="productDto.weight" label="重量">
        </el-table-column>
        <el-table-column prop="nums" label="数量">
        </el-table-column>
        <el-table-column prop="productDto.perGram" label="克工费">
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="float:right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>


  </div>
</template>

<script>
  import chooseProduceMsgApi from '@/api/sale/soAccount/chooseProduceMsg'
  import soAccountApi from '@/api/sale/soAccount/soAccount'

  export default {
    data() {
      return {
        count: null,
        soAccountId: '',
        //制单时间

        //基础信息展示
        formdata: {
          soType: '',
          customer: '',
          repository: '',
          soStatus: '',
          dept: '',
          name: '',
          condition: '',
          createdBy: '',
          createdTime: "",
        },
        // 选货单当前页码
        soAccountPage: 0,
        // 选货单当前显示个数
        soAccountSize: 1,
        selectorderlist: [],
        soAccountVo: {},
        currentPage: 1,
        limit: 10,
        soId: -1,
        max_page: 0,
        SoAccountUpdateVo: {
          soAccountIds: [],
        },
        href: "http://localhost:4399/need/soaccountFile/soaccount/file/1/1"
      }
    },
    methods: {
      // test() { //



      // }).catch(err => {
      // this.$message.error(err.message)
      // console.log(err)
      // })
      // },
      //更改状态
      check(soStatus, soOperateStatus) {

        this.SoAccountUpdateVo.soAccountIds.push(this.soId);
        this.SoAccountUpdateVo.soStatus = soStatus;
        this.SoAccountUpdateVo.soOperateStatus = soOperateStatus;

        soAccountApi.updateSoAccountStatus(this.SoAccountUpdateVo).then(res => {
          this.$message.success(res.message)
          this.$router.push({
            path: 'soAccountList'
          })
        })
        this.search()
      },

      //返回选货单列表页
      back() {
        this.$router.push({
          path: 'soAccountList'
        })
      },
      //分页
      handleSizeChange(val) {
        this.limit = val
        console.log("当前页", this.limit);
        this.search()
      },
      handleCurrentChange(val) {

        this.currentPage = val
        this.search()
      },
      search() {
        chooseProduceMsgApi.findChooseProduceBySoId(this.currentPage,
          this.limit, this.soId).then(res => {
          this.selectorderlist = res.data.list
          this.count = res.data.totalPage
          console.log(res.data.list);
        })
      },

      // 上一页
      prev() {
        let current_page = this.soAccountPage;

        if (--current_page <= 0) {
          return
        }
        this.$router.push({
          path: 'selectgoodsdetail',
          query: {
            "current_page":
              --this.soAccountPage,
            'total_page': this.max_page,
          }
        })
      },
      next() {
        console.log(this.max_page);
        let
          current_page = this.soAccountPage;
        if (++current_page > this.max_page) {
          return;
        }
        this.$router.push({
          path: 'selectgoodsdetail',
          query: {
            "current_page": ++this.soAccountPage,
            'total_page': this.max_page,
          }
        })
      }
    },
    created() {

      this.soAccountPage = this.$route.query.current_page;
      this.max_page = this.$route.query.total_page;
      this.href = "http://localhost:4399/need/soaccountFile/soaccount/file/" + this.soAccountPage + '/1'



      console.log(this.$route);
      soAccountApi.findSoAccountAll(this.soAccountPage, 1, this.soAccountVo).then(res => {
        this.formdata = res.data.list[0]
        this.soId = res.data.list[0].soId;
        console.log(this.formdata);
        this.search()
      })
    }
  }

</script>

<style scoped>
  .but {
    float: right;
  }

  .submitandcancel {
    margin-left: 1000px;
    margin-top: -13px;
  }

  .infoborder {
    border-style: solid;
    padding-left: 10px;
    margin-left: 10px;
    border-color: white white white skyblue;
  }

</style>
